<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JQuery/jquery-3.7.1.js"></script>
		<style type="text/css">
			.text{background:red;}
			.text2{background:blue;}
		</style>
		<script>
			$(document).ready(function(){
				//(1)设置“兰花”列表项背景颜色为灰色，文字颜色为红色
				$("li:contains('兰花')").css({
					"background-color":"gray",
					"color":"red"
				});
				
				//(2)给序号为偶数的列表项（“桂花”、“菊花”）设置背景颜色为蓝色；
				$("li:even").css("background-color", "blue");
				
				//(3)移除掉“梅花”列表项中使用的样式类（即名为“text2”）;
				$("li.text2").removeClass("text2");
				
				//(4)在ul前增加一个文字段落，其中文字内容为“校园花卉一览表” ；
				$("ul").before("<p>校园花卉一览表</p>");
				
				//(5)设置添加的文字段落的class类名为“text”；
				$("ul").prev("p").addClass("text");
				
				//(6)在ul后增加一个有序列表（ol）；
				$("ul").after("<ol></ol>");
				
				//(7)在有序列表（ol）中增加一个列表项（可试着用两种不同的方法并比较它们的不同）；
				// 方法一：创建<li>元素并使用appendTo方法
				$("<li>新增列表项 1</li>").appendTo("ol");
				//方法二：直接append一个新的<li>
				$("ol").append("<li>新增列表项 2</li>");
				
				//(8)将ul中最后一个列表项复制到有序列表（ol）中原所有列表项之后
				$("ul li:last").clone().appendTo("ol");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>桂花</li>
			<li class="text2">梅花</li>
			<li>菊花</li>
			<li>兰花</li>
		</ul>
	</body>
</html>